<template>
  <div class="carorder">
    <el-row class="row-bg" justify="space-around">
      <el-col :xs="24" :md="10">
        <div class="carimg">
          <img :src="getpic(cardetail.carPic1)" width="70%" height="100%" />
        </div>
      </el-col>
      <el-col :xs="24" :md="14">
        <div class="cardetailddd">
          <h2>{{cardetail.carName}}</h2>
          <h3 style="margin-top:30px">
            <span style="color: rgb(245, 190, 11)">{{cardetail.price}}</span>&nbsp;/日均
          </h3>

          <p style="margin-top:40px">
            车系&nbsp;
            <span style="color:grey">{{ cardetail.carSeries}}</span>
          </p>
          <p style="margin-top:20px">
            车型&nbsp;
            <span style="color:grey">{{cardetail.carType}}</span>
          </p>
          <p style="margin-top:20px">
            座椅 &nbsp;
            <span style="color:grey">{{cardetail.carSeatNum}}</span>
          </p>
          <p style="margin-top:20px">
            燃油类型&nbsp;
            <span style="color:grey">{{cardetail.carOilType}}</span>
          </p>
        </div>
      </el-col>
    </el-row>

    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :md="24">
        <div class="addorder">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row class="row-bg" justify="space-around">
              <el-col :md="14">
                <el-form-item label="取车地点" prop="region1">
                  <el-select v-model="ruleForm.region1" placeholder="请选择取车地点">
                    <el-option label="苏州" value="苏州"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="杭州" value="杭州"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="还车地点" prop="region2">
                  <el-select v-model="ruleForm.region2" placeholder="请选择还车地点">
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="苏州" value="苏州"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="杭州" value="杭州"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="取车时间" required>
                  <el-col :span="13">
                    <el-form-item prop="date">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span
                  style="font-size:13px"
                >租车时长&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-input-number v-model="ruleForm.time" @change="handleChange" :min="1" :max="10"></el-input-number>
                <span style="font-size:13px">&nbsp;&nbsp;&nbsp;&nbsp;天</span>
              </el-col>
              <el-col :md="10">
                <div class="orderSale">
                  <el-checkbox @change="add100">线上支付押金</el-checkbox>
                  <p style=";margin:  80px 0 20px 0">
                    <span style="font-size:30px;margin-right:50px">总价:</span>
                    <span style="font-size:50px;color:rgb(245, 190, 11)">{{orderPrice}}元</span>
                  </p>
                  <el-form-item class="aaa">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交订单</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>

      <!-- <el-checkbox @change="200">价格+200</el-checkbox> -->
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      ruleForm: {
        region1: "",
        region2: "",
        date: new Date(),
        time: 1
      },
      rules: {
        region1: [
          { required: true, message: "请选择取车地点", trigger: "change" }
        ],
        region2: [
          { required: true, message: "请选择还车地点", trigger: "change" }
        ],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      },

      cardetail: [],
      otherPrice1: "",
      otherPrice2: "",
      price: "",
      carPrice: "",
      orderPrice: "",
      returnDate: new Date(),
      orderDate: new Date(),
      pickDate: ""
    };
  },
  computed: {},

  methods: {
    getpic(pic) {
      console.log("ha", pic);
      let path = "http://localhost:3000/upload/" + pic;
      console.log("图片", path);
      return path;
    },
    add100(event) {
      if (event == true) {
        this.otherPrice1 = 1000;
      } else {
        this.otherPrice1 = 0;
      }
      this.orderPrice = this.carPrice * this.ruleForm.time + this.otherPrice1;
    },
    handleChange(a) {
      this.ruleForm.time = a;
      this.orderPrice = this.carPrice * a + this.otherPrice1;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/CarlistCtt");
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.returnDate = moment(this.ruleForm.date)
            .add(this.ruleForm.time, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          this.pickDate = moment(this.ruleForm.date).format("YYYY-MM-DD");
          this.$axios
            .post("http://localhost:3000/cardetail/SubmitOrder", {
              carId: this.cardetail.carId,
              orderPrice: this.orderPrice,
              pickDate: this.pickDate,
              returnDate: this.returnDate,
              pickLocation: this.ruleForm.region1,
              returnLocation: this.ruleForm.region2
            })
            .then(res => {
              console.log("order", res);
            })
            .catch(err => {
              console.log("错误信息：", err);
            });
          console.log("归还时间" + this.returnDate);
          console.log("取车时间" + this.pickDate);
          console.log("订单时间" + this.orderDate);
          window.location.href =
            "http://localhost:3000/pay?num=" + this.orderPrice;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.$axios
      .put("http://localhost:3000/carlist/ShowCarDetails", {
        carId: this.$route.query.carId
      })

      .then(res => {
        console.log(res.data.data);
        this.cardetail = res.data.data[0];
        this.price = res.data.data[0].price;
        this.carPrice = this.price;
        this.orderPrice = this.carPrice;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  }
};
</script>
<style>
.carorder {
  margin-top: 50px;
}
.carimg {
  text-align: center;
  height: 300px;
  margin-bottom: 50px;
}
.cardetailddd {
  height: 300px;
  margin-left: 180px;
}

.orderSale {
  height: 500px;
}
.demo-ruleForm {
  padding-top: 20px;
  border-top: 3px solid rgb(245, 190, 11);
}
.aaa {
  margin-top: 10px;
}
.carimg {
  text-align: center;
}
@media (max-width: 620px) {
  .cardetailddd {
    margin-left: 30px;
  }
  .orderSale {
    margin: 30px 0px 0px 50px;
  }
  .carimg {
    width: 60%;
  }
}
</style>
